<template>
	<view class="content">
		<view class="vip-img">
			<u-swiper
				:list="banner" 
				circular 
				:indicator="true" 
				:autoplay="true" 
				height="868rpx" 
				indicatorActiveColor="#DDE4F0"
				indicatorInactiveColor="#fff"
				indicatorMode="dot"
			></u-swiper>
		</view>
		
		<view class="list flex flex-between">
			<view 
				v-for="(item, index) in vipList" 
				:key="item.id"
				class="item flex flex-column" 
				:class="{active: current == item.id}" 
				@click="changeCurrent(item.id)"
			>
				<text class="tag">{{item.name}}（{{item.duration}}天）</text>
				<view class="flex flex-text">
					<text class="price">{{(item.price / 100).toFixed(2)}}</text>
					<text class="text">元</text>
				</view>
				<!-- <text class="line-price">¥{{((item.price * 1.2) / 100).toFixed(2)}}</text> -->
				<text class="line-price">{{ item.description }}</text>
			</view>
		</view>
		
		<view class="footer">
			<view class="vip-tip" v-if="isVip">
				vip到期时间：{{ vipExpireTime }}
			</view>
			<u-button v-if="!isVip" color="#1C6EFB" shape="circle" text="立即开通" @click="handlePurchase"></u-button>
			<u-button v-else color="#1C6EFB" shape="circle" @click="handlePurchase" text="立即续费"></u-button>
		</view>

		<!-- 支付组件 -->
		<payment 
			:show="showPayment" 
			:amount="paymentAmount" 
			:payOrderId="payOrderId"
			@update:show="showPayment = $event"
			@close="closePayment"
			@payment-success="handlePaymentSuccess"
			@payment-error="handlePaymentError"
			@refresh-list="refreshPage"
		/>
	</view>
</template>

<script>
	import payment from '@/components/payment/payment.vue';
	import { formatTimestamp } from '@/utils/index.js'
	export default {
		components: { payment },
		data() {
			return {
				current: 0,
				vipList: [],
				showPayment: false,
				paymentAmount: 0,
				payOrderId: '',
				banner: [],
				isVip: false,
				vipExpireTime: null
			}
		},
		onLoad() {
			// 检查用户当前是否是vip
			this.getmemberinfo();
			
			// 获取轮播图
			this.bannerList();
			
			// 获取vip分类
			this.getVipList();
		},
		methods: {
			//获取当前用户信息
			getmemberinfo(){
				this.$http_api.userInfo({}).then((res)=>{
					this.isVip = res.vip == 1;
					this.vipExpireTime = '';
					if (res.vipExpireTime) {
						const date = formatTimestamp(res.vipExpireTime);
						this.vipExpireTime = date.date + " " + date.time;
					}
				})
			},
			
			bannerList() {
				this.$http_api.getBannerList({ position: 5 }).then(res => {
					this.banner = res.map(item => item.picUrl)
				});
			},
			
			getVipList() {
				this.$http_api.getVipList().then(res => {
					this.vipList = res;
					// 默认选中第一个
					if (this.vipList.length > 0) {
						this.current = this.vipList[0].id;
					}
				})
			},
			changeCurrent(id) {
				this.current = id;
			},
			// 立即购买点击
			handlePurchase() {
				if (!this.current) {
					uni.showToast({ title: '请选择会员卡', icon: 'none' });
					return;
				}
				
				// 获取选中的会员卡信息
				const selectedCard = this.vipList.find(item => item.id === this.current);
				if (!selectedCard) {
					uni.showToast({ title: '会员卡信息异常', icon: 'none' });
					return;
				}
				// 创建支付订单
				this.$http_api.purchaseVipCard({
					vipCardId: this.current
				}).then(res => {
					// 获取到订单ID后打开支付面板
					if (res && res.id) {
						this.payOrderId = res.orderNo;
						this.paymentAmount = Number(selectedCard.price / 100).toFixed(2);
						this.showPayment = true;
					} else {
						uni.showToast({ title: res.msg, icon: 'none' });
					}
				}).catch(err => {
					uni.showToast({ title: err.msg, icon: 'none' });
				});
			},
			// 关闭支付面板
			closePayment() {
				this.showPayment = false;
			},
			// 支付成功
			handlePaymentSuccess(result) {
				uni.showToast({ title: '开通成功', icon: 'success' });
				setTimeout(() => {
					// 支付成功后返回用户中心
					uni.navigateBack();
				}, 1500);
			},
			// 支付失败
			handlePaymentError(error) {
				uni.showToast({ title: '支付失败', icon: 'none' });
			},
			// 刷新页面
			refreshPage() {
				this.getVipList();
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
		
		.vip-img {
			width: 100%;
			height: 868rpx;
			background: #ccc;
			border-radius: 28rpx;
		}
		
		.list {
			// gap: 20rpx;
			margin-top: 40rpx;
			background: transparent;
			.item {
				border: 2rpx solid #3F84FC;
				border-top-right-radius: 39rpx;
				position: relative;
				flex: 1;
				filter: grayscale(1);
				background: #fff;
				&:nth-child(2) {
					margin-left: 20rpx;
					margin-right: 20rpx;
				}
				
				.tag {
					position: absolute;
					top: -10rpx;
					left: -2rpx;
					background: linear-gradient(to right, #1D72FC, #52CDF2);
					color: #fff;
					border-radius: 10rpx 20rpx 10rpx 0;
					font-family: "PINGFANG";
					font-size: 28rpx;
					font-weight: 400;
					text-align: center;
					padding: 5rpx 10rpx;
				}
				
				.price {
					font-family: "PINGFANG";
					color: #1C6EFB;
					font-weight: 600;
					font-size: 38rpx;
					margin-top: 50rpx;
				}
				
				.text {
					font-family: "PINGFANG";
					color: #1C6EFB;
					font-weight: 600;
					font-size: 24rpx;
				}
				
				.line-price {
					font-weight: 400;
					font-size: 22rpx;
					color: #AAAAAA;
					font-family: "PINGFANG";
					margin-bottom: 20rpx;
					// text-decoration: line-through;
				}
			}
			
			.active {
				filter: grayscale(0);
			}
		}
	}
	
	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #FFFFFF;
		padding: 20rpx 40rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		
		.vip-tip {
			font-size: 28rpx;
			text-align: center;
			padding: 10rpx 0 20rpx 0;
			color: #905100;
		}
	}
</style>